import React, { Component } from 'react';
import Condition from 'components/condition';
import ExpenseService from '../expense-service';
import Annotate from 'components/template/annotate';
import showMore from 'images/expense-detail/show-more.svg';
import { queryCurrencyPrecision } from 'share/common';

const { If } = Condition;

class Amount extends Component {

 static renderValue = ({ value, currencyCode, companyCurrencyRate, rateDeviation, actualCurrencyRate, isCompanyRate }) => {
    if (currencyCode) {
      const precision = queryCurrencyPrecision(currencyCode);
      return <span>{currencyCode} {React.Component.prototype.filterMoney(value, precision)}</span>;
    }
    if (isCompanyRate) {
      return (
        <span>
        {Number(companyCurrencyRate || 0)
          .toFixed(7)}
          <span className={`${rateDeviation > 10 && 'expense-amount-message-warn'}`}>{actualCurrencyRate > companyCurrencyRate ? ' + ' : ' - '} {rateDeviation}%</span>
      </span>
      );
    }
    return value;
  };

  static Content = (props) => {
    const { detail: { isShowMore, title, value, body, hasEditedAmount, originalAmount, dataIndex, currencyCode } } = props;
    return (
      dataIndex === 'amount'
        ? (
          <div className="expense-amount-currency">
            <div className="expense-amount-message">
              <span className={`expense-amount-message-header ${!title ? 'expense-amount-message-header-l' : ''}`}>
                {Amount.renderValue({ currencyCode, value })}
              </span>
              <If value={hasEditedAmount}>
                <s className="expense-amount-change">
                  {Amount.renderValue({
                    currencyCode,
                    value: originalAmount
                  })}
                </s>
              </If>
            </div>
            {
              body.map(item => {
                return (
                  <div className="expense-amount-message">
                    {
                      Object.prototype.toString.call(item) === '[object Object]'
                        ? <span>{item.title}： {Amount.renderValue({ ...item })}</span>
                        : item.map(child => <span className="expense-amount-message-child">{child.title}： {Amount.renderValue({ ...child })}</span>)
                    }
                  </div>
                );
              })
            }
          </div>
        )
        : (
          <div className="expense-amount-message-tra">
            <span> {this.renderValue({ currencyCode, value })}</span>
            <If value={isShowMore}>
              <img className="expense-amount-message-icon" onClick={props.handleShowMore} src={showMore} alt="show-more"/>
            </If>
          </div>
        )
    );
  };

  render() {
    const { amount, isWaitForAudit, annotates, currentExpense: { id }, loginUser } = this.props;
    return (
      <section className="expense-amount-content">
        {
          amount.map(item => {
            return (
              <div className="expense-amount-content-list">
                {
                  item.title &&
                  <div className="expense-amount-content-label">
                    {item.title}
                  </div>
                }
                <div className="expense-amount-content-text">
                  <Annotate
                    params={{
                      typeName: 'INVOICE',
                      entityID: id,
                      target: { type: item.dataIndex }
                    }}
                    disabled={!isWaitForAudit || item.dataIndex === 'allowanceAmount'}
                    onChange={this.props.refreshAnnotate}
                    annotateList={ExpenseService.getAnnotateList(item.dataIndex, annotates, loginUser)}
                  >
                    <div className={`${isWaitForAudit ? 'expense-item-annotate' : ''}`}>
                      <Amount.Content
                        detail={item}
                        handleShowMore={this.props.handleShowMore}
                      />
                    </div>
                  </Annotate>
                </div>
              </div>
            );
          })
        }
      </section>
    );
  }
}

Amount.propTypes = {};

export default Amount;
